<template>
  <div class="w100p">
    <div
      class="s-tac s-d-flex s-ai-center s-jc-center h287"
      v-if="dataListShow"
    >
      <div>
        <img
          class="w190 h120"
          src="@/assets/nodata.png"
          alt=""
        >
        <div
          style="color:#A8A8A8"
          class="fz14"
        >暂无数据</div>
      </div>
    </div>
    <div
      v-else
      class="h287 w100p"
      id="types"
    ></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import * as statisticsApi from "@/api/statistics";
export default {
  data() {
    return {
      dataListShow: false,
    };
  },
  props: {
    dataList: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  mounted() {
    this.handleInit();
  },
  // watch: {
  //   dataList(val) {
  //     console.log(val);
  //     this.handleInit();
  //   },
  // },
  methods: {
    handleInit(_row) {
      let _this = this;
      statisticsApi.weekClassify().then((res) => {
        if (res && res.success) {
          let dataList = res.data;
          let classifyReport = dataList.map((item) => {
            return {
              name: item.classifyName,
              value: item.count,
              weight: item.weight,
            };
          });
          _this.$nextTick(() => {
            if (classifyReport && classifyReport.length != 0) {
              this.dataListShow = false;
              let myChart = echarts.init(document.getElementById("types"));
              let option = {
                color: [
                  "#37a2da",
                  "#32c5e9",
                  "#9fe6b8",
                  "#ffdb5c",
                  "#ff9f7f",
                  "#fb7293",
                  "#e7bcf3",
                  "#8378ea",
                ],
                tooltip: {
                  trigger: "item",
                  formatter: "{a} <br/>{b} : {c} ({d}%)",
                },
                toolbox: {
                  show: true,
                },
                grid: {
                  top: "8%",
                  left: "8%",
                  right: "8%",
                  bottom: "8%",
                  // containLabel: true
                },
                legend: {
                  orient: "vertical",
                  right: "0%",
                  align: "right",
                  top: "middle",
                  textStyle: {
                    color: "#8C8C8C",
                  },
                },
                series: [
                  {
                    name: "医废统计",
                    type: "pie",
                    radius: "65%", //设置饼图大小
                    center: ["40%", "50%"], //设置饼图位置
                    data: classifyReport,
                    label: {
                      //去除饼图的指示折线label
                      normal: {
                        show: false,
                      },
                    },
                  },
                ],
              };
              myChart.setOption(option);
              window.addEventListener("resize", function () {
                myChart.resize();
              });
            } else {
              this.dataListShow = true;
            }
          });
        }
      });
    },
  },
};
</script>
